import React, { useEffect } from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { notification } from 'antd';

import Login from './pages/login/login';
import Register from './pages/register/register';
import Project from './pages/project/project';
import Dashboard from './pages/dashboard/dashboard';
import Epic from './pages/epic/epic';
import Layout from './Layout/Layout';

import EventBus from './utils/event';

const App = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [api, contextHolder] = notification.useNotification();

  //错误弹框提示方法
  const openNotification = (msg) => {
    api.error({
      message: msg,
      placement: 'topRight', //位置
    });
  };

  useEffect(() => {
    if (location.pathname === '/') {
      navigate('/login');
    }

    //订阅事件
    EventBus.on('global_not_login', (msg) => {
      // console.log(msg);
      navigate('/login');
      openNotification(msg);
    });

    //订阅事件
    EventBus.on('global_error_tips', function (msg) {
      console.log('发生错误了');
      openNotification(msg);
    });
  }, []);

  return (
    <div className='App'>
      {contextHolder}
      <Routes>
        <Route path='/login' index element={<Login />} />
        <Route path='/register' element={<Register />} />
        <Route element={<Layout />}>
          <Route path='/project' element={<Project />} />
          <Route path='/project/:id/dashboard' element={<Dashboard />} />
          <Route path='/project/:id/epic' element={<Epic />} />
        </Route>
      </Routes>
    </div>
  );
};

export default App;
